Blog / Atajos de teclado en Visual Studio Code

Tanto si eres un acérrimo usuario de este magnífico editor de texto, como si estás empezando a utilizarlo, conocer los atajos de teclado de Visual Studio Code hará que piques código de una manera mucho más rápida y eficiente. Además, al aprender estos atajos podrás descubrir funcionalidades de Visual Studio que quizás no conocías.

¡Empecemos!

Tipos de atajos de teclado en Visual Studio Code

En Visual Studio Code existen multitud de atajos de teclado. Estos pueden ser englobados en diferentes grupos según la funcionalidad que llevan a cabo.

En primer lugar, tenemos los atajos que facilitan la realización de acciones básicas en el manejo de Visual Studio Code: abrir o cerrar ventanas, activar o desactivar el modo de pantalla completa, abrir la paleta de comandos, etc.

En segundo lugar, existen los comandos para la gestión de archivos, que nos permiten abrir archivos, crearlos, guardarlos, o cerrarlos.

En tercer lugar, están los atajos para programar. Es decir, aquellos que nos permiten copiar, cortar y pegar fragmentos de código, crear comentarios, escribir código repetitivo de una sola vez, etc.

A continuación, tenemos los atajos de teclado de Visual Studio Code pensados para encontrar y/o reemplazar fragmentos de código. Estos atajos nos permiten encontrar, seleccionar y/o reemplazar fragmentos de código de nuestros documentos de forma rápida y eficiente.

Atajos de funcionalidad básica

Los atajos de funcionalidad general más útiles en Visual Studio Code son los siguientes:

• Ctrl + Shift + P: abre la paleta de comandos.
• Ctrl + Shift + N: abre una nueva ventana
• Ctrl + Shift + W: cierra una ventana
• F11: activa y desactiva la pantalla completa.

Atajos de Visual Studio Code para la gestión de archivos

En lo que a gestión de archivos se refiere, los atajos de teclado más utilizados son los siguientes:

• Ctrl + O: permite abrir con VS Code un archivo existente en el dispositivo.
• Ctrl + N: abre un archivo nuevo.
• Ctrl + S: guarda el archivo.
• Ctrl + Shift + S: realiza la acción «Guardar Como».
• Ctrl + K + Ctrl + W: cierra todas las pestañas que estén abiertas.
• Ctrl + Shift + T: permite abrir la última o últimas pestañas cerradas.
• Ctrl + 2: divide la pantalla en dos.

Atajos para programar de Visual Studio Code

A continuación se exponen algunos de los atajos más interesantes para facilitar la programación en Visual Studio Code, tanto básicos como avanzados:

• html:5 + enter: cuando trabajamos con archivos .html, podemos escribir html:5 nada más empezar a programar para que escriba automáticamente la estructura básica de un archivo HTML. El resultado es el siguiente:

• etiqueta*X + enter: cuando trabajamos con archivos .html, podemos escribir el nombre de cualquier etiqueta (sin los símbolos <>) y multiplicarla por el número que queramos mediante el símbolo *. De esta forma, al pulsar enter, se crearan tantas etiquetas como hayamos indicado. Por ejemplo, si escribimos en nuestro Visual Studio Code div.clase*10, el resultado es el siguiente:

• Ctrl + Alt + Flechas: igual que en los casos anteriores, al trabajar con archivos .html, podemos emplear esta combinación para que el cursor se multiplique en diferentes líneas, de forma que podamos insertar un mismo contenido en diferentes filas a la vez. Por ejemplo, siguiendo el ejemplo anterior, podemos utilizar esta combinación para escribir un texto como contenido de todos los div a la vez.

• etiqueta.clase + enter : cuando queremos crear una etiqueta que contenga una determinada clase, Visual Studio Code nos permite crearla escribiendo simplemente el nombre de la etiqueta seguido de un punto y el nombre de la clase.
• Shift + Alt + F: da formato al documento.
• Alt + Z: permite romper la línea, de forma que el código, en vez de coger todo el ancho posible, adquiera únicamente el ancho de nuestra pantalla.
• Ctrl + C: copia el fragmento de código seleccionado.
• Ctrl + X: corta el fragmento de código seleccionado.
• Ctrl + V: pega el fragmento de código copiado o cortado previamente.

Atajos de búsqueda

Si queremos encontrar y/o reemplazar determinados elementos en nuestro archivo de código, podemos emplear los siguientes atajos de teclado:

• Ctrl + F: abre el cuadro de diálogo de búsqueda de elementos. Gracias a él, podremos encontrar los textos que queramos de forma rápida.
• Ctrl + H: abre el cuadro de diálogo de búsqueda junto con el de reemplazo. De esta manera, además de localizar un determinado contenido, podremos reemplazarlo por el que indiquemos. Por ejemplo, de la siguiente manera podremos reemplazar todas las etiquetas <h3> por <h2>.

• Ctrl + G: sirve para abrir un buscador con el que ir a una determinada línea en concreto del código.
• Alt + Enter: una vez hemos realizado una determinada búsqueda con el cuadro de diálogo, podemos emplear este atajo para seleccionar todos los elementos encontrados.
• Ctrl + D: gracias a este atajo, una vez tenemos abierto el cuadro de búsqueda, podemos seleccionar un determinado fragmento de código y añadirlo automáticamente a la búsqueda, de forma que se identifiquen todas las coincidencias de dicho código.

Conclusiones

Visual Studio Code es un editor de texto excelente que permite llevar a cabo todo tipo de funcionalidades de forma nativa. En este sentido, los atajos de teclado que proporciona son muy útiles a la hora de hacer uso de todo su potencial.

Si además de las funcionalidades que trae Visual Studio de forma nativa, quieres conocer aquellas que pueden ser añadidas en forma de extensión, te recomendamos nuestro artículo «Las mejores extensiones para Visual Studio Code 2021«. Por otro lado, si quieres conocer todas las características y peculiaridades de este editor de texto, te recomendamos su documentación oficial.

Espero que este artículo te haya servido de ayuda. Si quieres aportar algo o conoces algún atajo interesante, por favor, no dudes en dejarme un comentario en esta publicación.

¡Te espero en el siguiente artículo!